<title>社交</title>

<link rel="stylesheet" href="/css/examples/components/widgets/social.css">

<div class="page ">
    <div class="page-header">
        <h1 class="page-title">社交小工具</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-sm btn-outline btn-default btn-round">
                <span class="text hidden-xs">设置</span> <i class="icon wb-chevron-right" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="page-content container-fluid">
        <div class="row" data-plugin="matchHeight" data-by-row="true">

            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow text-center">
                    <div class="widget-header cover overlay" style="height: calc(100% - 100px);">
                        <img class="cover-image" src="/images/photos/view-1.jpg" alt="..." style="height: 100%;">
                        <div class="overlay-panel vertical-align">
                            <div class="vertical-align-middle">
                                <a class="avatar avatar-100 bg-white margin-bottom-10 img-bordered margin-xs-0" href="javascript:;">
                                    <img src="/images/portraits/1.jpg" alt="">
                                </a>
                                <div class="font-size-20">郭雨萌</div>
                                <div class="font-size-14 grey-400">设计师</div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-footer padding-horizontal-30 padding-vertical-20 height-100">
                        <div class="row no-space">
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">关注</div>
                                    <span class="counter-number">11.2K</span>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">粉丝</div>
                                    <span class="counter-number">683</span>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <div class="counter-label">微博</div>
                                    <span class="counter-number">326</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header cover overlay" style="height: calc(100% - 100px);">
                        <img class="cover-image" src="/images/photos/view-2.jpg" alt="..." style="height: 100%;">
                        <div class="overlay-panel overlay-background overlay-top">
                            <div class="row">
                                <div class="col-xs-6">
                                    <div class="font-size-20 white">郭雨萌</div>
                                    <div class="font-size-14 grey-400">设计师</div>
                                </div>
                                <div class="col-xs-6 text-right">
                                    <div class="avatar">
                                        <img src="/images/portraits/2.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-footer text-center bg-white padding-horizontal-30 padding-vertical-20 height-100">
                        <div class="row no-space">
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number">6809</span>
                                    <div class="counter-label">关注</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number">569</span>
                                    <div class="counter-label">粉丝</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number">357</span>
                                    <div class="counter-label">微博</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header cover overlay">
                        <div class="cover-background height-150" style="background-image: url('/images/photos/view-3.jpg')"></div>
                    </div>
                    <div class="widget-body padding-horizontal-30 padding-vertical-20" style="height:calc(100% - 250px);">
                        <div style="position:relative;padding-left:110px;">
                            <a class="avatar avatar-100 bg-white img-bordered" href="javascript:;" style="position:absolute;top:-50px;left:0;">
                                <img src="/images/portraits/2.jpg" alt="">
                            </a>
                            <div class="margin-bottom-20">
                                <div class="font-size-20">郭雨萌</div>
                                <div class="font-size-14">设计师</div>
                            </div>
                        </div>
                        <p>
                            昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了，如此大规模的裁员在银行发展史上可谓罕见，但也并非无迹可寻。 </p>
                    </div>
                    <div class="widget-footer text-center bg-blue-grey-400 padding-30 height-100">
                        <div class="row no-space">
                            <div class="col-xs-6">
                                <div class="counter counter-inverse">
                                    <span class="counter-number">7896</span>
                                    <div class="counter-label inline-block margin-left-5">关注</div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="counter counter-inverse">
                                    <span class="counter-number">621</span>
                                    <div class="counter-label inline-block margin-left-5">粉丝</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-content padding-20 bg-green-500 white height-full">
                        <a class="avatar pull-left margin-right-20" href="javascript:;">
                            <img src="/images/portraits/15.jpg" alt="">
                        </a>
                        <div style="overflow:hidden;">
                            <small class="pull-right grey-200">昨天, 13:48</small>
                            <div class="font-size-18">段旭</div>
                            <div class="grey-200 font-size-14 margin-bottom-10">Web 设计师</div>
                            <blockquote class="cover-quote font-size-16 white">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-content white bg-twitter padding-20 height-full">
                        <h3 class="white margin-top-0">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了</h3>
                        <small>2016.9.9 iphone 7 plus</small>
                        <div class="margin-top-30">
                            <i class="icon fa-twitter font-size-26"></i>
                            <ul class="list-inline pull-right margin-top-15">
                                <li>
                                    <i class="icon wb-heart"></i> 598
                                </li>
                                <li>
                                    <i class="icon wb-thumb-up"></i> 96
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-content white bg-facebook padding-20 height-full">
                        <h3 class="white margin-top-0">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了</h3>
                        <small>2016.9.9 iphone 7 plus</small>
                        <div class="margin-top-30">
                            <i class="icon fa-facebook font-size-26"></i>
                            <ul class="list-inline pull-right margin-top-15">
                                <li>
                                    <i class="icon wb-heart"></i> 1256
                                </li>
                                <li>
                                    <i class="icon wb-star"></i> 379
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header bg-green-600 padding-30 white">
                        <a class="avatar avatar-100 img-bordered bg-white pull-left margin-right-20" href="javascript:;">
                            <img src="/images/portraits/11.jpg" alt="">
                        </a>
                        <div class="vertical-align height-100 text-truncate">
                            <div class="vertical-align-middle">
                                <div class="font-size-20 margin-bottom-5 text-truncate">段旭</div>
                                <div class="font-size-14 text-truncate">管理员</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header bg-blue-600 padding-30 white text-center">
                        <a class="avatar avatar-100 img-bordered bg-white" href="javascript:;">
                            <img src="/images/portraits/12.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header padding-30 bg-white">
                        <a class="avatar avatar-100 pull-left margin-right-20" href="javascript:;">
                            <img src="/images/portraits/13.jpg" alt="">
                        </a>
                        <div class="vertical-align text-right height-100 text-truncate">
                            <div class="vertical-align-middle">
                                <div class="font-size-20 margin-bottom-5 blue-600 text-truncate">郭雨萌</div>
                                <div class="font-size-14 text-truncate">Web 设计师</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="widget widget-shadow">
                    <div class="widget-header padding-30 bg-blue-600 white">
                        <a class="avatar avatar-100 img-bordered bg-white pull-right" href="javascript:;">
                            <img src="/images/portraits/14.jpg" alt="">
                        </a>
                        <div class="vertical-align height-100 text-truncate">
                            <div class="vertical-align-middle">
                                <div class="font-size-20 margin-bottom-5 text-truncate">郭雨萌</div>
                                <div class="font-size-14 text-truncate">Web 设计师</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" data-plugin="masonry">
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow">
                    <div class="widget-header bg-blue-600 text-center padding-30 padding-bottom-15">
                        <div class="font-size-20 white">郭雨萌</div>
                        <div class="grey-300 font-size-14 margin-bottom-20">Web 设计师</div>
                        <a class="avatar avatar-100 img-bordered margin-bottom-10 bg-white" href="javascript:;">
                            <img src="/images/portraits/4.jpg" alt="">
                        </a>
                    </div>
                    <div class="widget-footer padding-horizontal-30 padding-vertical-20 text-center">
                        <div class="row no-space">
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number blue-600">102</span>
                                    <div class="counter-label">项目</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number blue-600">83</span>
                                    <div class="counter-label">客户</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number blue-600">13.5K</span>
                                    <div class="counter-label">关注</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget">
                    <div class="widget-header white bg-cyan-600 padding-30 clearfix">
                        <a class="avatar avatar-100 pull-left margin-right-20" href="javascript:;">
                            <img src="/images/portraits/5.jpg" alt="">
                        </a>
                        <div class="pull-left">
                            <div class="font-size-20 margin-bottom-15">郭雨萌</div>
                            <p class="margin-bottom-5 text-nowrap">
                                <i class="icon wb-map margin-right-10" aria-hidden="true"></i> <span class="text-break">北京市东花市北里20号楼6单元501室</span>
                            </p>
                            <p class="margin-bottom-5 text-nowrap">
                                <i class="icon wb-envelope margin-right-10" aria-hidden="true"></i>
                                <span class="text-break">xxx@admui.com</span>
                            </p>
                            <p class="margin-bottom-5 text-nowrap">
                                <i class="icon fa-weibo margin-right-10" aria-hidden="true"></i>
                                <span class="text-break">Yumengguo</span>
                            </p>
                        </div>
                    </div>
                    <div class="widget-content">
                        <div class="row no-space padding-vertical-20 padding-horizontal-30 text-center">
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number cyan-600">102</span>
                                    <div class="counter-label">项目</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number cyan-600">125</span>
                                    <div class="counter-label">客户</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter">
                                    <span class="counter-number cyan-600">10.8K</span>
                                    <div class="counter-label">关注</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow avatar-group">
                    <div class="widget-header text-center padding-30">
                        <ul class="list-unstyled list-inline">
                            <li>
                                <a class="avatar avatar-lg margin-5" href="javascript:;">
                                    <img src="/images/portraits/7.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a class="avatar avatar-lg margin-5" href="javascript:;">
                                    <img src="/images/portraits/8.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a class="avatar avatar-lg margin-5" href="javascript:;">
                                    <img src="/images/portraits/9.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                        <div class="font-size-18 blue-600">郭雨萌</div>
                        <div class="font-size-14">设计师</div>
                    </div>
                    <div class="widget-footer bg-blue-grey-400 white text-center padding-vertical-20 padding-horizontal-30">
                        <div class="row no-space ">
                            <div class="col-xs-4">
                                <div class="counter counter-inverse">
                                    <span class="counter-icon"><i class="icon wb-eye margin-right-15" aria-hidden="true"></i></span>
                                    <span class="counter-number">102</span>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter counter-inverse">
                                    <span class="counter-icon"><i class="icon wb-heart margin-right-15" aria-hidden="true"></i></span>
                                    <span class="counter-number">8</span>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="counter counter-inverse">
                                    <span class="counter-icon"><i class="icon wb-user margin-right-15" aria-hidden="true"></i></span>
                                    <span class="counter-number">12.6K</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow background-bottom">
                    <div class="widget-header cover overlay">
                        <div class="cover-background height-250" style="background-image: url(/images/photos/view-4.jpg)"></div>
                        <div class="overlay-panel overlay-background overlay-bottom">
                            <div class="row no-space">
                                <div class="col-xs-6">
                                    <a class="avatar avatar-lg bg-white pull-left margin-right-20 img-bordered" href="javascript:;">
                                        <img src="/images/portraits/10.jpg" alt="">
                                    </a>
                                    <div>
                                        <div class="font-size-20">郭雨萌</div>
                                        <div class="font-size-14">CEO</div>
                                    </div>
                                </div>
                                <div class="col-xs-6">
                                    <div class="row no-space text-center">
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <div class="counter-label">关注</div>
                                                <span class="counter-number">6584</span>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <div class="counter-label">粉丝</div>
                                                <span class="counter-number">2046</span>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <div class="counter-label">微博</div>
                                                <span class="counter-number">325</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow text-center">
                    <div class="widget-header cover overlay">
                        <div class="cover-background" style="background-image: url(/images/photos/view-5.jpg)">
                            <div class="vertical-align padding-horizontal-0">
                                <div class="vertical-align-bottom width-full">
                                    <a class="avatar avatar-100 img-bordered bg-white margin-top-20" href="javascript:;">
                                        <img src="/images/portraits/17.jpg" alt="">
                                    </a>
                                    <h3 class="white">郭雨萌</h3>
                                    <p class="white"><i class="icon wb-map margin-right-10" aria-hidden="true"></i> 上海
                                    </p>
                                    <button type="button" class="btn btn-primary margin-bottom-20">关注</button>
                                    <div class="row no-space overlay-background">
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <span class="counter-number">13.2K</span>
                                                <div class="counter-label">关注</div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <span class="counter-number">246</span>
                                                <div class="counter-label">粉丝</div>
                                            </div>
                                        </div>
                                        <div class="col-xs-4">
                                            <div class="counter counter-inverse">
                                                <span class="counter-number">32</span>
                                                <div class="counter-label">微博</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow">
                    <div class="widget-header bg-blue-600 white padding-15 clearfix">
                        <a class="avatar avatar-lg pull-left margin-right-20" href="javascript:;">
                            <img src="/images/portraits/16.jpg" alt="">
                        </a>
                        <div class="font-size-18">郭雨萌</div>
                        <div class="grey-300 font-size-14">Web 设计师</div>
                    </div>
                    <div class="widget-content">
                        <ul class="list-group list-group-bordered">
                            <li class="list-group-item">
                                <span class="badge badge-success">6</span>
                                <i class="icon wb-inbox" aria-hidden="true" draggable="true"></i> Cras justo odio
                            </li>
                            <li class="list-group-item">
                                <span class="badge badge-info">2</span>
                                <i class="icon wb-user" aria-hidden="true" draggable="true"></i> Dapibus ac facilisis in
                            </li>
                            <li class="list-group-item">
                                <i class="icon wb-bell" aria-hidden="true" draggable="true"></i> Morbi leo risus
                            </li>
                            <li class="list-group-item">
                                <span class="badge badge-info">10</span>
                                <i class="icon wb-info-circle" aria-hidden="true" draggable="true"></i> Porta ac
                                consectetur ac
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow">
                    <div class="widget-header cover">
                        <div class="cover-background padding-30" style="background-image: url('/images/photos/view-6.jpg')">
                            <blockquote class="cover-quote white">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了。</blockquote>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="avatar avatar-sm pull-left margin-right-10 margin-top-5">
                            <img src="/images/portraits/3.jpg" alt="">
                        </div>
                        <div class="info margin-bottom-25">
                            <div class="blue-grey-700 text-uppercase">郭雨萌</div>
                            <div class="blue-grey-400 text-capitalize">开发者</div>
                        </div>
                        <p class="margin-bottom-40">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了，如此大规模的裁员在银行发展史上可谓罕见，但也并非无迹可寻。</p>
                        <div class="text-right">
                            <a class="text-action" href="javascript:;"><i class="icon wb-heart"></i> <span>23</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-xs-12 masonry-item">
                <div class="widget widget-shadow">
                    <div class="widget-header height-150 bg-blue-600 vertical-align padding-vertical-20 padding-horizontal-25">
                        <blockquote class="cover-quote vertical-align-middle white font-size-20">
                            昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了。
                        </blockquote>
                    </div>
                    <div class="widget-body padding-top-0" style="margin-top: -30px">
                        <div class="avatar avatar-lg img-bordered bg-white margin-bottom-10">
                            <img src="/images/portraits/13.jpg" alt="">
                        </div>
                        <div class="info margin-bottom-25">
                            <div class="blue-grey-700">郭雨萌</div>
                            <div class="blue-grey-400">开发者</div>
                        </div>
                        <p class="margin-bottom-35 blue-grey-500">昔日铁饭碗，今日大裁员，躺着就能赚钱的传统银行业要变天了。 </p>
                        <div class="text-right">
                            <a class="text-action" href="javascript:;"><i class="icon wb-heart"></i> <span>16</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/vendor/matchheight/jquery.matchHeight.min.js"></script>
<script src="/vendor/masonry/masonry.pkgd.min.js"></script>
